<script lang="ts" setup>
defineProps<{ onSignIn?: () => void ; onSignUp?: () => void }>();

const bp = useAppBreakpoints();
</script>

<template>
  <div class="relative overflow-hidden pb-32.5">
    <div v-if="bp.tablet" class="intro-help-bg" />
    <div class="relative m-[0_auto] max-w-347 w-full flex flex-col items-center px-6">
      <img v-if="bp.tablet" class="max-w-301 w-full" src="../imgs/intro-image.png" alt="Intro">
      <img v-else class="w-113%" src="../imgs/intro-image-mb.png" alt="Intro">
      <h2>
        Exclusive G9.Game
      </h2>
      <h1>Affiliate program</h1>
      <p class="mb-7.5 text-5 text-slate-200 font-500 lt-tablet:(mb-5 text-3)">
        Boost your profit with RevShare up to 50%
      </p>
      <div class="relative h-28 max-w-189 w-full flex items-center justify-end pr-6 lt-mobilel:(relative mb-6 h-16 flex-col pr-0)">
        <img v-if="bp.mobilel" class="absolute left-0 top-0 h-full w-full" src="../imgs/intro-banner-desc.png" alt="">
        <img v-if="!bp.mobilel" class="absolute left-0 top-0 w-full" src="../imgs/intro-banner-desc-mb.png" alt="">

        <div class="absolute top-55% lt-mobilel:(top-66%) -translate-y-50%">
          <AButton class="ant-cover__Button-3d-primary !h-12.5 lt-mobilel:(-bottom-20) !lt-mobilel:w-46" type="primary" @click="onSignUp">
            Become a partner
          </AButton>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.intro-help-bg {
  --uno: 'absolute top-0 left-0 right-0 h-50%';
  background: radial-gradient(78.16% 73.17% at 50% 2.56%, #a70f0f 0%, #1d1e24 100%);
}
h2 {
  --uno: '-mt-44 mb-1 text-13 font-900 uppercase lh-[95%]';
  --uno: 'lt-tablet:(text-6 -mt-33)';
}
h1 {
  --uno: 'text-brand-500 text-15.5 font-900 mb-3 uppercase whitespace-nowrap lh-[95%]';
  --uno: 'lt-tablet:text-7';
}
</style>
